<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线下单</title>
    <script src="/vue/vue.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script src="/elementui/index.js"></script>
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
    <div id="app">
        <el-container style="height: 565px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <h1>供应商列表</h1>
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
                    <el-radio-button :label="false">展开</el-radio-button>
                    <el-radio-button :label="true">收起</el-radio-button>
                </el-radio-group>
                <el-menu
                        default-active="defaultActiveIndex"
                        class="el-menu-vertical-demo"
                        :collapse="isCollapse">
                    <el-menu-item v-for="company in companies" :index="company.id">
                        <el-button type="text" @click="getProductsByC(company.id)">
                            <i class="el-icon-menu"></i>
                            <span style="color: #606266">{{company.companyName}}</span>
                        </el-button>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <el-main>
                    <el-row>
                        <el-input v-model="param" placeholder="请输入搜索内容" clearable style="width: 20%;"></el-input>
                        <el-button icon="el-icon-search" type="primary" circle @click="searchParam"></el-button>
                    </el-row>
                    <el-divider></el-divider>
                    <el-table
                            ref="productTable"
                            :data="tableData"
                            height="380"
                            border
                            stripe
                            tooltip-effect="dark"
                            style="width: 100%"
                            v-loading="loading"
                            :header-cell-style="{background:'#DCDFE6',color:'#606266'}"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                fixed="left"
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="id"
                                label="id"
                                width="300">
                        </el-table-column>
                        <el-table-column
                                prop="pnumber"
                                label="产品编号"
                                sortable
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="pname"
                                label="产品名称"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="pimg"
                                label="商品图片"
                                width="200">
                            <template slot-scope="scope">
                                <el-image
                                        style="width: 50px; height: 50px"
                                        :src="'http://121.5.226.17/images/'+scope.row.pimg"
                                        :preview-src-list="['http://121.5.226.17/images/'+scope.row.pimg]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="pprice"
                                label="价格"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="categorise"
                                label="所属名称"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="pquality"
                                label="品质"
                                sortable
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="psales"
                                label="销量"
                                sortable
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="premarks"
                                label="描述"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="200">
                            <template slot-scope="scope">
                                <el-button
                                        icon="el-icon-goods"
                                        size="normal"
                                        type="success"
                                        @click="productDetail(scope.$index, scope.row)">商品详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @prev-click="prev"
                            @next-click="next"
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            :current-page="current"
                            :page-sizes="[5, 10, 20, 50]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                    <el-row>
                        <el-button
                                icon="el-icon-shopping-cart-full"
                                type="primary"
                                style="position: absolute;right: 0;"
                                @click="buy">购买</el-button>
                    </el-row>

<!--                    详情-->
                    <el-dialog
                            title="商品详情"
                            :visible.sync="dialogVisible"
                            :close-on-click-modal="false"
                            width="50%">

                        <el-container style="height: 350px; border: 1px solid #eee">
                            <el-header style="height: 220px;">
                                <el-container>
                                    <el-aside style="width: 200px;">
                                        <el-image
                                                style="width: 200px; height: 200px;margin-top: 10px;"
                                                :src="'http://121.5.226.17/images/'+product.pimg"
                                                :preview-src-list="['http://121.5.226.17/images/'+product.pimg]">
                                        </el-image>
                                    </el-aside>
                                    <el-main>
                                        <!--                        <span v-if="product.premarks!=null">{{product.premarks}}</span>-->
                                        <p style="color: orange">{{product.pname}}</p>
                                        <p>规格：{{product.pprice}}元/个</p>
                                        <p v-if="product.attrName != null">{{product.attrName}}：{{product.attrValue}}</p>
                                        <p>价格：<span style="color: red;font-size: larger;">￥{{product.pprice}}</span></p>
<!--                                        <p v-if="product.productStatus == '有货'">状态：<span style="background-color: #5daf34">{{product.productStatus}}</span></p>-->
<!--                                        <p v-if="product.productStatus == '没货'">状态：<span style="background-color: red">{{product.productStatus}}</span></p>-->
                                    </el-main>
                                </el-container>

                            </el-header>

                            <el-main style="border-top: 1px solid #eee">
                                <el-row :gutter="20">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div style="padding-top: 15px;">
                                            <label class="label_name">物品名称：</label>{{product.pname}}
                                        </div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div style="padding-top: 15px;">
                                            <label class="label_name">产品编号：</label>{{product.pnumber}}
                                        </div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div style="padding-top: 15px;">
                                            <label class="label_name">产品销量：</label>{{product.psales}}
                                        </div>
                                    </div></el-col>
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div style="padding-top: 15px;">
                                            <label class="label_name">产品分类：</label>{{product.categorise}}
                                        </div>
                                    </div></el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="6"><div class="grid-content bg-purple">
                                        <div style="padding-top: 15px;">
                                            <label class="label_name">单价：</label>{{product.pprice}}
                                        </div>
                                    </div></el-col>
                                </el-row>
                            </el-main>
                        </el-container>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">返回</el-button>
                        </div>
                    </el-dialog>

<!--                    购买-->
                    <el-dialog
                            title="购物车"
                            :visible.sync="dialogTableVisible"
                            width="60%"
                            @close="closeShopCart">

                        <el-table
                                :data="shopCart"
                                stripe
                                v_loading="loading"
                                border>
                            <el-table-column
                                    prop="productNumber"
                                    label="id"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="商品名称">
                            </el-table-column>
                            <el-table-column
                                    label="商品数量"
                                    width="210">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.demandQuantity" @change="handleChange(scope.row)" :min="1" :max="999"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="pprice"
                                    label="单价（/元）"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="estimatedCost"
                                    label="预计花费（/元）"
                                    width="200">
                            </el-table-column>
                        </el-table>

                        <div slot="footer" class="dialog-footer">
                            <p>共：￥{{totalPrice}}</p>
                            <el-button @click="dialogTableVisible = false">取 消</el-button>
                            <el-button type="primary" @click="add">确 定</el-button>
                        </div>
                    </el-dialog>

                </el-main>
            </el-container>
        </el-container>

    </div>
</body>
<script>
    var Main = {
        data() {
            return {
                loading: true,
                tableData: [],  //表格数据
                current:1,  //当前行
                total:1,    //总行数
                pageSize:10,    //页码
                pages:1,    //总页数
                param:'',   //搜索
                isCollapse: false,
                currentProduct:null,   //当前选中商品
                multipleSelection: [],
                defaultActiveIndex:'',
                companyId:'',
                companies:[],
                dialogVisible: false,
                dialogTableVisible:false,
                product:{
                    id:'',
                    pnumber:'',
                    pname:'',
                    pimg:'',
                    pprice:'',
                    penterprise:'',
                    pstatus:'',
                    pquality:0,
                    psales:0,
                    premarks:'',
                    categorise:'',
                    attrName:'',
                    attrValue:'',
                    productStatus:'',
                    number:1,
                    total:0,

                },   //商品信息
                shopCart:[],
                totalPrice:0,
            }
        },
        methods: {
            //分页上一页
            prev(current){
                this.getPage(current,this.pageSize,this.param,this.companyId);
            },
            //分页下一页
            next(current){
                this.getPage(current,this.pageSize,this.param,this.companyId);
            },
            //分页当前页点击
            currentChange(current){
                this.getPage(current,this.pageSize,this.param,this.companyId);
            },
            sizeChange(pageSize) {
                this.getPage(1,pageSize,this.param,this.companyId);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //加载数据
            getPage(current,pageSize,param,companyId){
                let params = new URLSearchParams();
                params.append("current",current);
                params.append("pageSize",pageSize);
                params.append("param",param);
                params.append("companyId",companyId)
                axios.get("/purchasing/products",{params:params}).then(value => {
                    if (value.data.state==1){
                        this.loading = false;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                        this.total = value.data.data.total;
                        this.pageSize = value.data.data.size;
                        this.pages = value.data.data.pages;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //
            getCompany(){
                axios.get("/purchasing/companies").then(value => {
                    if (value.data.state==1){
                        this.companies = value.data.data;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //搜索
            searchParam(){
                this.loading = true;
                this.getPage(1,this.pageSize,this.param,this.companyId);
                this.param = '';
            },
            //点击供应商搜索
            getProductsByC(companyId){
                this.loading = true;
                this.defaultActiveIndex = companyId;
                this.companyId = companyId;
                this.getPage(1,this.pageSize,this.param,this.companyId);
            },
            //点击商品详情
            productDetail(index,row){
                this.loading = true;
                this.dialogVisible = true;
                axios.get("/purchasing/product/"+row.id).then(value => {
                    if (value.data.state==1){
                        this.loading = false;
                        this.product = value.data.data;
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //商品数量改变
            handleChange(row){
                this.totalPrice -= row.estimatedCost;
                row.estimatedCost = row.demandQuantity * row.pprice;
                this.totalPrice += row.estimatedCost;
            },
            //关闭购物车
            closeShopCart(){
                this.shopCart = [];
                this.totalPrice = 0;
            },
            //购物车
            buy(){
                this.dialogTableVisible = true;
                for (let select of this.$refs.productTable.selection) {
                    let shop = {
                        productNumber:'',
                        productName:'',
                        pprice: '',
                        demandQuantity:1,
                        estimatedCost:0
                    };
                    shop.productNumber = select.pnumber;
                    shop.productName = select.pname;
                    shop.pprice = select.pprice;
                    shop.demandQuantity = 1;
                    shop.estimatedCost = shop.demandQuantity * shop.pprice;
                    this.totalPrice += shop.estimatedCost;
                    this.shopCart.push(shop);
                }

            },
            add(){
                this.loading = true;
                axios.post("/purchasing/add_to_purchase",this.shopCart).then(value => {
                    if (value.data.state = 1){
                        this.loading = false;
                        this.sendMessage("采购成功，去下单吧","success");
                        setTimeout("window.location=\"/application_list.html\";",1500);
                    }else {
                        this.sendMessage("出错啦","error");
                    }
                });
            },
            //提示信息
            sendMessage(msg,type){
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            }
        },
        mounted(){
            //加载数据
            this.getPage(1,this.pageSize,this.param,this.companyId);
            this.getCompany();
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>